μ μ λΆμ νμ ν¨ν΄μ μ¬μ©ν TypeScript μ½λ λΆμ κΈ°μ μ μ΄ν΄λ΄ λλ€. μ€μ μμ λ° λͺ¨λ² μ¬λ‘λ₯Ό ν΅ν΄ μ½λ νμ§μ κ°μ νκ³ , μ€λ₯λ₯Ό μ‘°κΈ°μ μλ³νκ³ , μ μ§ κ΄λ¦¬μ±μ ν₯μμν΅λλ€.
TypeScript μ½λ λΆμ: μ μ λΆμ νμ ν¨ν΄
JavaScriptμ μμ μ§ν©μΈ TypeScriptλ μΉ κ°λ°μ μλμ μΈ μΈκ³μ μ μ νμ΄νμ μ 곡ν©λλ€. μ΄λ₯Ό ν΅ν΄ κ°λ°μλ κ°λ° μ£ΌκΈ° μ΄κΈ°μ μ€λ₯λ₯Ό λ°κ²¬νκ³ , μ½λ μ μ§ κ΄λ¦¬μ±μ κ°μ νκ³ , μ λ°μ μΈ μννΈμ¨μ΄ νμ§μ ν₯μμν¬ μ μμ΅λλ€. TypeScriptμ μ΄μ μ νμ©νλ κ°μ₯ κ°λ ₯ν λꡬ μ€ νλλ νΉν νμ ν¨ν΄μ μ¬μ©νλ μ μ μ½λ λΆμμ λλ€. μ΄ κ²μλ¬Όμμλ TypeScript νλ‘μ νΈλ₯Ό ν₯μμν€λ λ° μ¬μ©ν μ μλ λ€μν μ μ λΆμ κΈ°μ λ° νμ ν¨ν΄μ μ΄ν΄λ΄ λλ€.
μ μ μ½λ λΆμμ΄λ 무μμ λκΉ?
μ μ μ½λ λΆμμ νλ‘κ·Έλ¨μ΄ μ€νλκΈ° μ μ μμ€ μ½λλ₯Ό κ²μ¬νμ¬ λλ²κΉ νλ λ°©λ²μ λλ€. μ¬κΈ°μλ μ½λμ ꡬ쑰, μ’ μμ± λ° νμ μ£Όμμ λΆμνμ¬ μ μ¬μ μΈ μ€λ₯, 보μ μ·¨μ½μ± λ° μ½λ© μ€νμΌ μλ°μ μλ³νλ μμ μ΄ ν¬ν¨λ©λλ€. μ½λλ₯Ό μ€ννκ³ λμμ κ΄μ°°νλ λμ λΆμκ³Ό λ¬λ¦¬ μ μ λΆμμ λ°νμμ΄ μλ νκ²½μμ μ½λλ₯Ό κ²μ¬ν©λλ€. μ΄λ₯Ό ν΅ν΄ ν μ€νΈ μ€μ μ¦μ λͺ ννμ§ μμ μ μλ λ¬Έμ λ₯Ό κ°μ§ν μ μμ΅λλ€.
μ μ λΆμ λꡬλ μμ€ μ½λλ₯Ό AST(Abstract Syntax Tree)λ‘ κ΅¬λ¬Έ λΆμν©λλ€. ASTλ μ½λ ꡬ쑰μ νΈλ¦¬ ννμ λλ€. κ·Έλ° λ€μ μ΄ ASTμ κ·μΉκ³Ό ν¨ν΄μ μ μ©νμ¬ μ μ¬μ μΈ λ¬Έμ λ₯Ό μλ³ν©λλ€. μ΄ μ κ·Ό λ°©μμ μ₯μ μ μ½λλ₯Ό μ€ννμ§ μκ³ λ κ΄λ²μν λ¬Έμ λ₯Ό κ°μ§ν μ μλ€λ κ²μ λλ€. λ°λΌμ μμ νκΈ°κ° λ μ΄λ ΅κ³ λΉμ©μ΄ λ§μ΄ λ€κΈ° μ μ κ°λ° μ£ΌκΈ° μ΄κΈ°μ λ¬Έμ λ₯Ό μλ³ν μ μμ΅λλ€.
μ μ μ½λ λΆμμ μ΄μ
- μ‘°κΈ° μ€λ₯ κ°μ§: μ μ¬μ μΈ λ²κ·Έ λ° νμ μ€λ₯λ₯Ό λ°νμ μ μ λ°κ²¬νμ¬ λλ²κΉ μκ°μ μ€μ΄κ³ μ ν리μΌμ΄μ μμ μ±μ ν₯μμν΅λλ€.
- ν₯μλ μ½λ νμ§: μ½λ© νμ€ λ° λͺ¨λ² μ¬λ‘λ₯Ό μ μ©νμ¬ λ μ½κΈ° μ½κ³ μ μ§ κ΄λ¦¬ κ°λ₯νλ©° μΌκ΄μ± μλ μ½λλ₯Ό λ§λλλ€.
- κ°νλ 보μ: μ μ©λκΈ° μ μ XSS(κ΅μ°¨ μ¬μ΄νΈ μ€ν¬λ¦½ν ) λλ SQL μ½μ κ³Ό κ°μ μ μ¬μ μΈ λ³΄μ μ·¨μ½μ±μ μλ³ν©λλ€.
- μμ°μ± ν₯μ: μ½λ κ²ν λ₯Ό μλννκ³ μ½λλ₯Ό μλμΌλ‘ κ²μ¬νλ λ° μμλλ μκ°μ μ€μ λλ€.
- 리ν©ν λ§ μμ μ±: 리ν©ν λ§ λ³κ²½μΌλ‘ μΈν΄ μλ‘μ΄ μ€λ₯κ° λ°μνκ±°λ κΈ°μ‘΄ κΈ°λ₯μ΄ μμλμ§ μλλ‘ ν©λλ€.
TypeScriptμ νμ μμ€ν λ° μ μ λΆμ
TypeScriptμ νμ μμ€ν μ μ μ λΆμ κΈ°λ₯μ κΈ°μ΄μ λλ€. κ°λ°μλ νμ μ£Όμμ μ 곡νμ¬ λ³μ, ν¨μ λ§€κ° λ³μ λ° λ°ν κ°μ μμ νμ μ μ§μ ν μ μμ΅λλ€. κ·Έλ° λ€μ TypeScript μ»΄νμΌλ¬λ μ΄ μ 보λ₯Ό μ¬μ©νμ¬ νμ κ²μ¬λ₯Ό μννκ³ μ μ¬μ μΈ νμ μ€λ₯λ₯Ό μλ³ν©λλ€. νμ μμ€ν μ μ¬μ©νλ©΄ μ½λμ μ¬λ¬ λΆλΆ κ°μ 볡μ‘ν κ΄κ³λ₯Ό ννν μ μμΌλ―λ‘ λμ± κ°λ ₯νκ³ μμ μ μΈ μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€.
μ μ λΆμμ μν TypeScript νμ μμ€ν μ μ£Όμ κΈ°λ₯
- νμ μ£Όμ: λ³μ, ν¨μ λ§€κ° λ³μ λ° λ°ν κ°μ νμ μ λͺ μμ μΌλ‘ μ μΈν©λλ€.
- νμ μΆλ‘ : TypeScriptλ μ¬μ©λ²μ λ°λΌ λ³μμ νμ μ μλμΌλ‘ μΆλ‘ ν μ μμΌλ―λ‘ κ²½μ°μ λ°λΌ λͺ μμ μΈ νμ μ£Όμμ΄ νμνμ§ μμ΅λλ€.
- μΈν°νμ΄μ€: κ°μ²΄μ λν κ³μ½μ μ μνμ¬ κ°μ²΄κ° κ°μ ΈμΌ νλ μμ± λ° λ©μλλ₯Ό μ§μ ν©λλ€.
- ν΄λμ€: μμ, μΊ‘μν λ° λ€νμ±μ μ§μνμ¬ κ°μ²΄ μμ±μ μν μ²μ¬μ§μ μ 곡ν©λλ€.
- μ λ€λ¦: νμ μ λͺ μμ μΌλ‘ μ§μ νμ§ μκ³ λ€μν νμ μΌλ‘ μλν μ μλ μ½λλ₯Ό μμ±ν©λλ€.
- μ λμ¨ νμ : λ³μκ° μ¬λ¬ νμ μ κ°μ 보μ ν μ μλλ‘ ν©λλ€.
- κ΅μ°¨ νμ : μ¬λ¬ νμ μ λ¨μΌ νμ μΌλ‘ κ²°ν©ν©λλ€.
- μ‘°κ±΄λΆ νμ : λ€λ₯Έ νμ μ λ°λΌ λ¬λΌμ§λ νμ μ μ μν©λλ€.
- λ§€νλ νμ : κΈ°μ‘΄ νμ μ μ νμ μΌλ‘ λ³νν©λλ€.
- μ νΈλ¦¬ν° νμ
:
Partial,Readonlyλ°Pickκ³Ό κ°μ μΌλ ¨μ κΈ°λ³Έ μ 곡 νμ λ³νμ μ 곡ν©λλ€.
TypeScriptμ© μ μ λΆμ λꡬ
TypeScript μ½λμμ μ μ λΆμμ μννλ λ° μ¬μ©ν μ μλ μ¬λ¬ λκ΅¬κ° μμ΅λλ€. μ΄λ¬ν λꡬλ₯Ό κ°λ° μν¬νλ‘μ ν΅ν©νμ¬ μ½λμ μ€λ₯λ₯Ό μλμΌλ‘ κ²μ¬νκ³ μ½λ© νμ€μ μ μ©ν μ μμ΅λλ€. μ ν΅ν©λ λꡬ 체μΈμ μ½λλ² μ΄μ€μ νμ§κ³Ό μΌκ΄μ±μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€.
μΈκΈ° μλ TypeScript μ μ λΆμ λꡬ
- ESLint: μ μ¬μ μΈ μ€λ₯λ₯Ό μλ³νκ³ , μ½λ© μ€νμΌμ μ μ©νκ³ , κ°μ μ¬νμ μ μν μ μλ λ리 μ¬μ©λλ JavaScript λ° TypeScript λ¦°ν°μ λλ€. ESLintλ κ΅¬μ± κ°λ₯μ±μ΄ λκ³ μ¬μ©μ μ§μ κ·μΉμΌλ‘ νμ₯ν μ μμ΅λλ€.
- TSLint (λ μ΄μ μ¬μ©λμ§ μμ): TSLintλ TypeScriptμ κΈ°λ³Έ λ¦°ν°μμ§λ§ ESLintλ₯Ό μ νΈνμ¬ λ μ΄μ μ¬μ©λμ§ μμ΅λλ€. κΈ°μ‘΄ TSLint ꡬμ±μ ESLintλ‘ λ§μ΄κ·Έλ μ΄μ ν μ μμ΅λλ€.
- SonarQube: TypeScriptλ₯Ό ν¬ν¨ν μ¬λ¬ μΈμ΄λ₯Ό μ§μνλ ν¬κ΄μ μΈ μ½λ νμ§ νλ«νΌμ λλ€. SonarQubeλ μ½λ νμ§, 보μ μ·¨μ½μ± λ° κΈ°μ λΆμ±μ λν μμΈν λ³΄κ³ μλ₯Ό μ 곡ν©λλ€.
- Codelyzer: TypeScriptλ‘ μμ±λ Angular νλ‘μ νΈλ₯Ό μν μ μ λΆμ λꡬμ λλ€. Codelyzerλ Angular μ½λ© νμ€ λ° λͺ¨λ² μ¬λ‘λ₯Ό μ μ©ν©λλ€.
- Prettier: μΌκ΄λ μ€νμΌμ λ°λΌ μ½λλ₯Ό μλμΌλ‘ ν¬λ§·νλ λ λ¨μ μΈ μ½λ ν¬λ§·ν°μ λλ€. Prettierλ₯Ό ESLintμ ν΅ν©νμ¬ μ½λ μ€νμΌκ³Ό μ½λ νμ§μ λͺ¨λ μ μ©ν μ μμ΅λλ€.
- JSHint: μ μ¬μ μΈ μ€λ₯λ₯Ό μλ³νκ³ μ½λ© μ€νμΌμ μ μ©ν μ μλ λ λ€λ₯Έ μΈκΈ° μλ JavaScript λ° TypeScript λ¦°ν°μ λλ€.
TypeScriptμ μ μ λΆμ νμ ν¨ν΄
νμ ν¨ν΄μ TypeScriptμ νμ μμ€ν μ νμ©νλ μΌλ°μ μΈ νλ‘κ·Έλλ° λ¬Έμ μ λν μ¬μ¬μ© κ°λ₯ν μ루μ μ λλ€. μ½λ κ°λ μ±, μ μ§ κ΄λ¦¬μ± λ° μ νμ±μ κ°μ νλ λ° μ¬μ©ν μ μμ΅λλ€. μ΄λ¬ν ν¨ν΄μλ μ λ€λ¦, μ‘°κ±΄λΆ νμ λ° λ§€νλ νμ κ³Ό κ°μ κ³ κΈ νμ μμ€ν κΈ°λ₯μ΄ ν¬ν¨λλ κ²½μ°κ° λ§μ΅λλ€.
1. μλ³λ μ λμ¨
νκ·Έκ° μ§μ λ μ λμ¨μ΄λΌκ³ λ νλ μλ³λ μ λμ¨μ μ¬λ¬ λ€λ₯Έ νμ μ€ νλμΌ μ μλ κ°μ λνλ΄λ κ°λ ₯ν λ°©λ²μ λλ€. μ λμ¨μ κ° νμ μλ κ°μ νμ μ μλ³νλ νλ³μλΌλ κ³΅ν΅ νλκ° μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μμ μ€μΈ κ°μ νμ μ μ½κ² κ²°μ νκ³ κ·Έμ λ°λΌ μ²λ¦¬ν μ μμ΅λλ€.
μ: API μλ΅ νν
λ°μ΄ν°κ° ν¬ν¨λ μ±κ³΅ μλ΅ λλ μ€λ₯ λ©μμ§κ° ν¬ν¨λ μ€λ₯ μλ΅μ λ°νν μ μλ APIλ₯Ό κ³ λ €νμμμ€. μλ³λ μ λμ¨μ μ¬μ©νμ¬ μ΄λ₯Ό λνλΌ μ μμ΅λλ€.
interface Success {
status: "success";
data: any;
}
interface Error {
status: "error";
message: string;
}
type ApiResponse = Success | Error;
function handleResponse(response: ApiResponse) {
if (response.status === "success") {
console.log("Data:", response.data);
} else {
console.error("Error:", response.message);
}
}
const successResponse: Success = { status: "success", data: { name: "John", age: 30 } };
const errorResponse: Error = { status: "error", message: "Invalid request" };
handleResponse(successResponse);
handleResponse(errorResponse);
μ΄ μμμ status νλλ νλ³μμ
λλ€. handleResponse ν¨μλ Success μλ΅μ data νλμ Error μλ΅μ message νλμ μμ νκ² μ‘μΈμ€ν μ μμ΅λλ€. TypeScriptλ status νλμ κ°μ λ°λΌ μμ
μ€μΈ κ°μ νμ
μ μκ³ μκΈ° λλ¬Έμ
λλ€.
2. λ³νμ μν λ§€νλ νμ
λ§€νλ νμ μ μ¬μ©νλ©΄ κΈ°μ‘΄ νμ μ λ³ννμ¬ μ νμ μ λ§λ€ μ μμ΅λλ€. νΉν κΈ°μ‘΄ νμ μ μμ±μ μμ νλ μ νΈλ¦¬ν° νμ μ λ§λλ λ° μ μ©ν©λλ€. μ΄λ₯Ό μ¬μ©νμ¬ μ½κΈ° μ μ©, λΆλΆ λλ νμμΈ νμ μ λ§λ€ μ μμ΅λλ€.
μ: μμ±μ μ½κΈ° μ μ©μΌλ‘ λ§λ€κΈ°
interface Person {
name: string;
age: number;
}
type ReadonlyPerson = Readonly<Person>;
const person: ReadonlyPerson = { name: "Alice", age: 25 };
// person.age = 30; // μ€λ₯: 'age'λ μ½κΈ° μ μ© μμ±μ΄λ―λ‘ ν λΉν μ μμ΅λλ€.
Readonly<T> μ νΈλ¦¬ν° νμ
μ νμ
Tμ λͺ¨λ μμ±μ μ½κΈ° μ μ©μΌλ‘ λ³νν©λλ€. μ΄λ κ² νλ©΄ κ°μ²΄μ μμ±μ μ€μλ‘ μμ νλ κ²μ λ°©μ§ν μ μμ΅λλ€.
μ: μμ±μ μ ν μ¬νμΌλ‘ λ§λ€κΈ°
interface Config {
apiEndpoint: string;
timeout: number;
retries?: number;
}
type PartialConfig = Partial<Config>;
const partialConfig: PartialConfig = { apiEndpoint: "https://example.com" }; // OK
function initializeConfig(config: Config): void {
console.log(`API Endpoint: ${config.apiEndpoint}, Timeout: ${config.timeout}, Retries: ${config.retries}`);
}
// μ΄κ²μ retriesκ° μ μλμ§ μμμ μ μμΌλ―λ‘ μ€λ₯λ₯Ό λ°μμν΅λλ€.
//initializeConfig(partialConfig);
const completeConfig: Config = { apiEndpoint: "https://example.com", timeout: 5000, retries: 3 };
initializeConfig(completeConfig);
function processConfig(config: Partial<Config>) {
const apiEndpoint = config.apiEndpoint ?? "";
const timeout = config.timeout ?? 3000;
const retries = config.retries ?? 1;
console.log(`Config: apiEndpoint=${apiEndpoint}, timeout=${timeout}, retries=${retries}`);
}
processConfig(partialConfig);
processConfig(completeConfig);
Partial<T> μ νΈλ¦¬ν° νμ
μ νμ
Tμ λͺ¨λ μμ±μ μ ν μ¬νμΌλ‘ λ³νν©λλ€. μ΄λ μ§μ λ νμ
μ μΌλΆ μμ±λ§ μλ κ°μ²΄λ₯Ό λ§λ€λ €λ κ²½μ°μ μ μ©ν©λλ€.
3. λμ νμ κ²°μ μ μν μ‘°κ±΄λΆ νμ
μ‘°κ±΄λΆ νμ μ μ¬μ©νλ©΄ λ€λ₯Έ νμ μ λ°λΌ λ¬λΌμ§λ νμ μ μ μν μ μμ΅λλ€. μ‘°κ±΄μ΄ μ°Έμ΄λ©΄ ν νμ μΌλ‘, μ‘°κ±΄μ΄ κ±°μ§μ΄λ©΄ λ€λ₯Έ νμ μΌλ‘ νκ°λλ μ‘°κ±΄λΆ ννμμ κΈ°λ°μΌλ‘ ν©λλ€. μ΄λ₯Ό ν΅ν΄ λ€μν μν©μ μ μνλ λ§€μ° μ μ°ν νμ μ μκ° κ°λ₯ν©λλ€.
μ: ν¨μμ λ°ν νμ μΆμΆ
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
function fetchData(url: string): Promise<string> {
return Promise.resolve("Data from " + url);
}
type FetchDataReturnType = ReturnType<typeof fetchData>; // Promise<string>
function calculate(x:number, y:number): number {
return x + y;
}
type CalculateReturnType = ReturnType<typeof calculate>; // number
ReturnType<T> μ νΈλ¦¬ν° νμ
μ ν¨μ νμ
Tμ λ°ν νμ
μ μΆμΆν©λλ€. Tκ° ν¨μ νμ
μ΄λ©΄ νμ
μμ€ν
μ λ°ν νμ
Rμ μΆλ‘ νκ³ λ°νν©λλ€. κ·Έλ μ§ μμΌλ©΄ anyλ₯Ό λ°νν©λλ€.
4. νμ μ’νκΈ°λ₯Ό μν νμ κ°λ
νμ κ°λλ νΉμ λ²μ λ΄μμ λ³μμ νμ μ μ’νλ ν¨μμ λλ€. μ’νμ§ νμ μ κΈ°λ°μΌλ‘ λ³μμ μμ± λ° λ©μλμ μμ νκ² μ‘μΈμ€ν μ μμ΅λλ€. μ΄λ μ λμ¨ νμ λλ μ¬λ¬ νμ μΌ μ μλ λ³μλ‘ μμ ν λ νμμ μ λλ€.
μ: μ λμ¨μμ νΉμ νμ νμΈ
interface Circle {
kind: "circle";
radius: number;
}
interface Square {
kind: "square";
side: number;
}
type Shape = Circle | Square;
function isCircle(shape: Shape): shape is Circle {
return shape.kind === "circle";
}
function getArea(shape: Shape): number {
if (isCircle(shape)) {
return Math.PI * shape.radius * shape.radius;
} else {
return shape.side * shape.side;
}
}
const circle: Circle = { kind: "circle", radius: 5 };
const square: Square = { kind: "square", side: 10 };
console.log("Circle area:", getArea(circle));
console.log("Square area:", getArea(square));
isCircle ν¨μλ Shapeκ° CircleμΈμ§ νμΈνλ νμ
κ°λμ
λλ€. if λΈλ‘ λ΄μμ TypeScriptλ shapeκ° Circleμμ μκ³ radius μμ±μ μμ νκ² μ‘μΈμ€ν μ μμ΅λλ€.
5. νμ μμ μ μν μ λ€λ¦ μ μ½ μ‘°κ±΄
μ λ€λ¦ μ μ½ μ‘°κ±΄μ μ¬μ©νλ©΄ μ λ€λ¦ νμ λ§€κ° λ³μμ ν¨κ» μ¬μ©ν μ μλ νμ μ μ νν μ μμ΅λλ€. μ΄λ κ² νλ©΄ μ λ€λ¦ νμ μ νΉμ μμ± λλ λ©μλκ° μλ νμ μμλ§ μ¬μ©ν μ μμ΅λλ€. μ΄λ κ² νλ©΄ νμ μμ μ±μ΄ ν₯μλκ³ λ ꡬ체μ μ΄κ³ μμ μ μΈ μ½λλ₯Ό μμ±ν μ μμ΅λλ€.
μ: μ λ€λ¦ νμ μ νΉμ μμ±μ΄ μλμ§ νμΈ
interface Lengthy {
length: number;
}
function logLength<T extends Lengthy>(obj: T) {
console.log(obj.length);
}
logLength("Hello"); // OK
logLength([1, 2, 3]); // OK
//logLength({ value: 123 }); // μ€λ₯: νμ
'{ value: number; }'μ μΈμλ₯Ό νμ
'Lengthy'μ λ§€κ° λ³μμ ν λΉν μ μμ΅λλ€.
// μμ± 'length'κ° νμ
'{ value: number; }'μμ λλ½λμμ§λ§ νμ
'Lengthy'μμλ νμμ
λλ€.
<T extends Lengthy> μ μ½ μ‘°κ±΄μ μ λ€λ¦ νμ
Tμ number νμ
μ length μμ±μ΄ μμ΄μΌ ν©λλ€. μ΄λ κ² νλ©΄ length μμ±μ΄ μλ νμ
μΌλ‘ ν¨μλ₯Ό νΈμΆνλ κ²μ λ°©μ§νμ¬ νμ
μμ μ±μ ν₯μμν΅λλ€.
6. μΌλ°μ μΈ μμ μ μν μ νΈλ¦¬ν° νμ
TypeScriptλ μΌλ°μ μΈ νμ λ³νμ μννλ μ¬λ¬ κΈ°λ³Έ μ 곡 μ νΈλ¦¬ν° νμ μ μ 곡ν©λλ€. μ΄λ¬ν νμ μ μ½λλ₯Ό λ¨μννκ³ κ°λ μ±μ λμΌ μ μμ΅λλ€. μ¬κΈ°μλ `Partial`, `Readonly`, `Pick`, `Omit`, `Record` λ±μ΄ ν¬ν¨λ©λλ€.
μ: Pick λ° Omit μ¬μ©
interface User {
id: number;
name: string;
email: string;
createdAt: Date;
}
// idμ μ΄λ¦λ§ μλ νμ
μμ±
type PublicUser = Pick<User, "id" | "name">;
// createdAt μμ±μ΄ μλ νμ
μμ±
type UserWithoutCreatedAt = Omit<User, "createdAt">;
const publicUser: PublicUser = { id: 123, name: "Bob" };
const userWithoutCreatedAt: UserWithoutCreatedAt = { id: 456, name: "Charlie", email: "charlie@example.com" };
console.log(publicUser);
console.log(userWithoutCreatedAt);
Pick<T, K> μ νΈλ¦¬ν° νμ
μ νμ
Tμμ Kμ μ§μ λ μμ±λ§ μ ννμ¬ μ νμ
μ λ§λλλ€. Omit<T, K> μ νΈλ¦¬ν° νμ
μ νμ
Tμμ Kμ μ§μ λ μμ±μ μ μΈνμ¬ μ νμ
μ λ§λλλ€.
μ€μ μμ© νλ‘κ·Έλ¨ λ° μμ
μ΄λ¬ν νμ ν¨ν΄μ λ¨μν μ΄λ‘ μ κ°λ μ΄ μλλλ€. μ€μ TypeScript νλ‘μ νΈμ μ€μ μμ© νλ‘κ·Έλ¨μ΄ μμ΅λλ€. λ€μμ μμ μ νλ‘μ νΈμμ μ΄λ¬ν ν¨ν΄μ μ¬μ©νλ λ°©λ²μ λν λͺ κ°μ§ μμ λλ€.
1. API ν΄λΌμ΄μΈνΈ μμ±
API ν΄λΌμ΄μΈνΈλ₯Ό ꡬμΆν λ μλ³λ μ λμ¨μ μ¬μ©νμ¬ APIκ° λ°νν μ μλ λ€μν νμ μ μλ΅μ λνλΌ μ μμ΅λλ€. λν λ§€νλ νμ κ³Ό μ‘°κ±΄λΆ νμ μ μ¬μ©νμ¬ APIμ μμ² λ° μλ΅ λ³Έλ¬Έμ λν νμ μ μμ±ν μλ μμ΅λλ€.
2. νΌ μ ν¨μ± κ²μ¬
νμ κ°λλ₯Ό μ¬μ©νμ¬ νΌ λ°μ΄ν°λ₯Ό μ ν¨μ± κ²μ¬νκ³ νΉμ κΈ°μ€μ μΆ©μ‘±νλμ§ νμΈν μ μμ΅λλ€. λν λ§€νλ νμ μ μ¬μ©νμ¬ νΌ λ°μ΄ν° λ° μ ν¨μ± κ²μ¬ μ€λ₯μ λν νμ μ λ§λ€ μλ μμ΅λλ€.
3. μν κ΄λ¦¬
μλ³λ μ λμ¨μ μ¬μ©νμ¬ μ ν리μΌμ΄μ μ λ€μν μνλ₯Ό λνλΌ μ μμ΅λλ€. λν μ‘°κ±΄λΆ νμ μ μ¬μ©νμ¬ μνμμ μνν μ μλ μμ μ λν νμ μ μ μν μλ μμ΅λλ€.
4. λ°μ΄ν° λ³ν νμ΄νλΌμΈ
ν¨μ κ΅¬μ± λ° μ λ€λ¦μ μ¬μ©νμ¬ νμ΄νλΌμΈμΌλ‘ μΌλ ¨μ λ³νμ μ μνμ¬ νλ‘μΈμ€ μ 체μμ νμ μμ μ±μ 보μ₯ν μ μμ΅λλ€. μ΄λ κ² νλ©΄ λ°μ΄ν°κ° νμ΄νλΌμΈμ μ¬λ¬ λ¨κ³λ₯Ό κ±°μΉλ©΄μ μΌκ΄μ± μκ³ μ ννκ² μ μ§λ©λλ€.
μν¬νλ‘μ μ μ λΆμ ν΅ν©
μ μ λΆμμ μ΅λν νμ©νλ €λ©΄ κ°λ° μν¬νλ‘μ ν΅ν©νλ κ²μ΄ μ€μν©λλ€. μ¦, μ½λλ₯Ό λ³κ²½ν λλ§λ€ μ μ λΆμ λꡬλ₯Ό μλμΌλ‘ μ€ννλ κ²μ λλ€. λ€μμ μν¬νλ‘μ μ μ λΆμμ ν΅ν©νλ λͺ κ°μ§ λ°©λ²μ λλ€.
- νΈμ§κΈ° ν΅ν©: ESLint λ° Prettierλ₯Ό μ½λ νΈμ§κΈ°μ ν΅ν©νμ¬ μ λ ₯ν λ μ½λμ λν μ€μκ° νΌλλ°±μ λ°μ΅λλ€.
- Git νν¬: Git νν¬λ₯Ό μ¬μ©νμ¬ μ½λλ₯Ό 컀λ°νκ±°λ νΈμνκΈ° μ μ μ μ λΆμ λꡬλ₯Ό μ€νν©λλ€. μ΄λ κ² νλ©΄ μ½λ© νμ€μ μλ°νκ±°λ μ μ¬μ μΈ μ€λ₯κ° ν¬ν¨λ μ½λκ° λ¦¬ν¬μ§ν 리μ 컀λ°λλ κ²μ λ°©μ§ν©λλ€.
- CI(μ§μμ ν΅ν©): μ 컀λ°μ΄ 리ν¬μ§ν λ¦¬λ‘ νΈμλ λλ§λ€ μ½λλ₯Ό μλμΌλ‘ κ²μ¬νλλ‘ CI νμ΄νλΌμΈμ μ μ λΆμ λꡬλ₯Ό ν΅ν©ν©λλ€. μ΄λ κ² νλ©΄ λͺ¨λ μ½λ λ³κ²½ μ¬νμ΄ νλ‘λμ μ λ°°ν¬λκΈ° μ μ μ€λ₯ λ° μ½λ© μ€νμΌ μλ° μ¬λΆλ₯Ό κ²μ¬ν©λλ€. Jenkins, GitHub Actions λ° GitLab CI/CDμ κ°μ λ리 μ¬μ©λλ CI/CD νλ«νΌμ μ΄λ¬ν λꡬμμ ν΅ν©μ μ§μν©λλ€.
TypeScript μ½λ λΆμμ λν λͺ¨λ² μ¬λ‘
TypeScript μ½λ λΆμμ μ¬μ©ν λ λ°λΌμΌ ν λͺ κ°μ§ λͺ¨λ² μ¬λ‘λ λ€μκ³Ό κ°μ΅λλ€.
- μ격 λͺ¨λ νμ±ν: TypeScriptμ μ격 λͺ¨λλ₯Ό νμ±ννμ¬ λ λ§μ μ μ¬μ μΈ μ€λ₯λ₯Ό ν¬μ°©ν©λλ€. μ격 λͺ¨λλ λ³΄λ€ κ°λ ₯νκ³ μμ μ μΈ μ½λλ₯Ό μμ±νλ λ° λμμ΄ λλ μ¬λ¬ μΆκ° νμ κ²μ¬ κ·μΉμ νμ±νν©λλ€.
- λͺ ννκ³ κ°κ²°ν νμ μ£Όμ μμ±: λͺ ννκ³ κ°κ²°ν νμ μ£Όμμ μ¬μ©νμ¬ μ½λλ₯Ό λ μ½κ² μ΄ν΄νκ³ μ μ§ κ΄λ¦¬ν μ μλλ‘ ν©λλ€.
- ESLint λ° Prettier ꡬμ±: μ½λ© νμ€ λ° λͺ¨λ² μ¬λ‘λ₯Ό μ μ©νλλ‘ ESLint λ° Prettierλ₯Ό ꡬμ±ν©λλ€. νλ‘μ νΈμ νμ μ ν©ν κ·μΉ μ§ν©μ μ ννμμμ€.
- ꡬμ±μ μ κΈ°μ μΌλ‘ κ²ν νκ³ μ λ°μ΄νΈ: νλ‘μ νΈκ° λ°μ ν¨μ λ°λΌ μ μ λΆμ ꡬμ±μ΄ μ¬μ ν ν¨κ³Όμ μΈμ§ νμΈνκΈ° μν΄ μ κΈ°μ μΌλ‘ κ²ν νκ³ μ λ°μ΄νΈνλ κ²μ΄ μ€μν©λλ€.
- λ¬Έμ λ₯Ό μ¦μ ν΄κ²°: μ μ λΆμ λꡬμμ μλ³λ λ¬Έμ λ₯Ό μ¦μ ν΄κ²°νμ¬ μμ νκΈ°κ° λ μ΄λ ΅κ³ λΉμ©μ΄ λ§μ΄ λ€μ§ μλλ‘ λ°©μ§ν©λλ€.
κ²°λ‘
TypeScriptμ μ μ λΆμ κΈ°λ₯μ νμ ν¨ν΄μ κ°λ ₯ν¨κ³Ό κ²°ν©λμ΄ κ³ νμ§μ μ μ§ κ΄λ¦¬ κ°λ₯νκ³ μμ μ μΈ μννΈμ¨μ΄λ₯Ό ꡬμΆνλ κ°λ ₯ν μ κ·Ό λ°©μμ μ 곡ν©λλ€. κ°λ°μλ μ΄λ¬ν κΈ°μ μ νμ©νμ¬ μ€λ₯λ₯Ό μ‘°κΈ°μ ν¬μ°©νκ³ , μ½λ© νμ€μ μ μ©νκ³ , μ λ°μ μΈ μ½λ νμ§μ ν₯μμν¬ μ μμ΅λλ€. κ°λ° μν¬νλ‘μ μ μ λΆμμ ν΅ν©νλ κ²μ TypeScript νλ‘μ νΈμ μ±κ³΅μ 보μ₯νλ λ° μ€μν λ¨κ³μ λλ€.
λ¨μν νμ μ£ΌμλΆν° μλ³λ μ λμ¨, λ§€νλ νμ λ° μ‘°κ±΄λΆ νμ κ³Ό κ°μ κ³ κΈ κΈ°μ μ μ΄λ₯΄κΈ°κΉμ§ TypeScriptλ μ½λμ μ¬λ¬ λΆλΆ κ°μ 볡μ‘ν κ΄κ³λ₯Ό νννκΈ° μν νλΆν λꡬ μΈνΈλ₯Ό μ 곡ν©λλ€. μ΄λ¬ν λꡬλ₯Ό λ§μ€ν°νκ³ κ°λ° μν¬νλ‘μ ν΅ν©ν¨μΌλ‘μ¨ μννΈμ¨μ΄μ νμ§κ³Ό μμ μ±μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€.
ESLintμ κ°μ λ¦°ν° λ° Prettierμ κ°μ ν¬λ§·ν°μ νμ κ³Όμ νκ°νμ§ λ§μμμ€. μ΄λ¬ν λꡬλ₯Ό νΈμ§κΈ° λ° CI/CD νμ΄νλΌμΈμ ν΅ν©νλ©΄ μ½λ© μ€νμΌκ³Ό λͺ¨λ² μ¬λ‘λ₯Ό μλμΌλ‘ μ μ©νμ¬ λ³΄λ€ μΌκ΄μ± μκ³ μ μ§ κ΄λ¦¬ κ°λ₯ν μ½λλ₯Ό λ§λ€ μ μμ΅λλ€. μ μ λΆμ ꡬμ±μ λν μ κΈ°μ μΈ κ²ν μ λ³΄κ³ λ λ¬Έμ μ λν μ¦κ°μ μΈ μ£Όμλ μ½λμ νμ§μ λκ² μ μ§νκ³ μ μ¬μ μΈ μ€λ₯κ° μλλ‘ νλ λ°μλ μ€μν©λλ€.
κΆκ·Ήμ μΌλ‘ μ μ λΆμ λ° νμ ν¨ν΄μ ν¬μνλ κ²μ TypeScript νλ‘μ νΈμ μ₯κΈ°μ μΈ κ±΄μ μ±κ³Ό μ±κ³΅μ λν ν¬μμ λλ€. μ΄λ¬ν κΈ°μ μ μμ©ν¨μΌλ‘μ¨ κΈ°λ₯μ μΌ λΏλ§ μλλΌ κ°λ ₯νκ³ μ μ§ κ΄λ¦¬ κ°λ₯νλ©° μμ νκΈ° μ¦κ±°μ΄ μννΈμ¨μ΄λ₯Ό ꡬμΆν μ μμ΅λλ€.